import React, { Component } from 'react';
import { View,Text } from 'react-native';
import {ScaledSheet} from 'react-native-size-matters';
import PropTypes from 'prop-types';

class DetailHeader extends Component {
  render() {
    console.log('header')
    const {maxPrcie,minPrice,newPrice,marketValue,percentChange24h,volume24h,turnoverRate} = this.props.data;
    return (
      <View style={styles.container}>
        <View style={styles.item}>
          <Text>
            {newPrice}
          </Text>
          <Text>
          单位：美元
          </Text>
        </View>
        <View style={styles.item}>
          <Text>最高(24H)</Text>
          <Text>
            {maxPrcie}
          </Text>
          <Text>最低(24H)</Text>
          <Text>
            {minPrice}
          </Text>
        </View>
        <View style={styles.item}>
          <Text>
            {turnoverRate}
          </Text>
          <Text>
            {volume24h}
          </Text>
        </View>
        <View style={styles.item}>
          <Text>
            {percentChange24h}
          </Text>
          <Text>
            {marketValue}
          </Text>
        </View>
      </View>
    );
  }
}

const styles = ScaledSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor:'#fff',
    marginBottom: '7@s'
  },
  item:{
    flex: 1
  }
});

DetailHeader.propTypes = {
  data: PropTypes.object.isRequired
}
export default DetailHeader;
